<!--
************
投保人信息填写
************
-->
<template>
  <div>
    <van-cell-group v-for="(item,index) in insuredInfoList" :key="index">
      <p class="insured-title">
        被保险人{{index+1}}
        <span class="delete-btn" @click="insuredDel(index)">删除</span>
      </p>
      <van-tabs v-model:active="item.relationShipTab" @click="vanTabs(index)"  :before-change="beforeChange" :class="item.relationShip?'tabActive':''" type="">
        <van-tab title="本人" ></van-tab>
        <van-tab title="配偶"></van-tab>
        <van-tab title="父母"></van-tab>
        <van-tab title="子女"></van-tab>
        <van-tab title="其他"></van-tab>
      </van-tabs>
      <div v-show="item.relationShip!=='00'">
        <van-field label="姓名" v-model="item.name" clearable placeholder="请输入姓名" />
        
        <mx-action-sheet label="证件类型" placeholder="请选择证件类型" :cardType="cardType" v-model="item.idType"  />
        <van-field label="证件号" v-model="item.idNumber" clearable placeholder="请输入证件号" />
        <mx-datetime-picker v-show="item.idType && item.idType != '1'" label="出生日期" placeholder="请选择出生日期" v-model="item.birthday" :indexNum="index" @confirmTime="confirmTimeBB" />
        <van-field label="手机号" v-model="item.phoneNo" clearable placeholder="请输入手机号" />
        
        <div v-show="item.guarderShow">
          <div class="guarderNotice">
            <img src="@/assets/images/home/icon-notice.png" />您添加的被保险人未满18周岁，请填写监护人信息
          </div>
          <van-cell center title="将投保人作为监护人">
            <template #right-icon>
              <van-switch  size="24" @change="switchChange" @click="switchClick(index)"  v-model="item.isBuyerBool" active-color="#ff9825"/>
            </template>
          </van-cell>
          <div v-show="item.isBuyer!='Y'">
            <van-field label="姓名" v-model="item.guarderName" clearable placeholder="请输入监护人姓名" />
            <mx-action-sheet label="证件类型" placeholder="请选择证件类型" :cardType="cardType" v-model="item.guarderIdType" />
            <van-field label="证件号" v-model="item.guarderIdNumber" clearable placeholder="请输入监护人证件号" />
            <mx-datetime-picker v-show="item.guarderIdType && item.guarderIdType != '1'" label="出生日期" placeholder="请选择出生日期" v-model="item.guarderBirthday" :indexNum="index" @confirmTime="confirmTimeBBJH" />
            <mx-action-sheet v-show="item.guarderIdType && item.guarderIdType != '1'" label="性别" placeholder="请选择监护人性别" :cardType="sexList" v-model="item.guarderSex" />
            <van-field label="手机号" v-model="item.guarderPhoneNo" clearable placeholder="请输入监护人手机号" />
          </div>
        </div>
      </div>
      <p style="padding-bottom:16px;"> </p>
      
    </van-cell-group>
    <div class="addBBInput">
      <van-button @click="addInsured" size="large" style="border:0" icon="plus" type="primary" plain color="#ff3327">新增被保险人</van-button>
    </div>
  </div>
</template>
<script lang="ts">
import { watchEffect,reactive,watch,computed, toRefs,ref,onMounted,defineComponent } from 'vue';
import { Toast,Dialog } from 'vant';
import {Resource} from '@/services/resource';
import { formatDate,checkInfoTel,checkInfoName,verIdCard,checkInfoCard,userAge } from '@/utils/utils';
import { useStore } from 'vuex'

export default defineComponent({
  name: 'policyHolder',
  props: {
    policyholder: {
      type: Object,
      default:{
        name: "",//姓名
        idType: "1",//1身份证  2护照 6港澳台回乡证
        idNumber: "",//证件号
        birthday: "",//生日
        sex: "",//性别
        phoneNo: "",//手机号
        smsCode: "",//验证码
      }
    },
  },
  components: {
    
  },
  setup(props, ctx){
    const store = useStore()
    interface Item{
      name: string;
      value: string;
    }

    watch([props.policyholder],(newValues, prevValues)=>{
       console.log("******policyholder")
       console.log(props.policyholder)
    })

    // 数据的双向绑定
    const state=reactive({
      // 参保人信息
      insuredInfoList: [
        {
          // 关系0本人 1配偶 2父母  3子女
          // 接口传入数据 00本人 01配偶  02 父母 03 子女
          relationShip: "",
          relationShipTab:0,
          // 参保人姓名
          name: "",
          // 参保人证件类型1身份证 2护照 6港澳台回乡证
          idType: "1",
          // 参保人证件号
          idNumber: "",
          // 参保人生日
          birthday: "",
          // 参保人性别
          sex: "",
          // 参保人手机号
          phoneNo: "",
          // 参保人确认按钮
          confirmBtnShow: false,
          // 参保人确认弹窗
          confirmDialogShow: false,
          // 监护人是否显示
          guarderShow: false,
          // 监护人是否本人Y、true本人  N、false非本人
          isBuyer: "Y",
          isBuyerBool: true,
          // 监护人姓名
          guarderName: "",
          // 监护人证件类型
          guarderIdType: "1",
          // 监护人证件号
          guarderIdNumber: "",
          // 监护人生日
          guarderBirthday: "",
          // 监护人性别
          guarderSex: "",
          // 监护人手机号
          guarderPhoneNo: "",
        },
      ],
      sexList:[],//性别类型数据
      cardType:[],//证件类型数据
      //当前参保人填写的第几个,弹窗赋值用的,当前tab按钮index
      currentInsuredIndex:0,
      //被保险人
      timeShowBB:false,//被保险人出生日期时间插件显示
      timeShowBBJH:false,//被保险人监护出生日期时间插件显示
      showSexBB:false,//被保险人是否展示性别类型选择
      showSexBBJH:false,//被保险人监护人是否展示性别类型选择
    })
    // 证件类型，性别赋值
    state.sexList=store.getters.sexList
    state.cardType=store.getters.cardType
    watchEffect(()=>{
      state.cardType=store.state.cardType
    })

    const methodsInfoFun=reactive({
      // 校验被保险人信息填写是否完整/正确
      checkAllInfoBB(){
        const _insuredInfoList=state.insuredInfoList;
        let _bool=true;
        _insuredInfoList.some((item,index)=>{
          const _paraObj={
            index:index,
            relationShip:item.relationShip,
            name:item.name,
            idType:item.idType,
            idNumber:item.idNumber,
            birthday:item.birthday,
            sex:item.sex,
            phoneNo:item.phoneNo,
            guarderShow:item.guarderShow,
            isBuyer:item.isBuyer,
            guarderName:item.guarderName,
            guarderIdType:item.guarderIdType,
            guarderIdNumber:item.guarderIdNumber,
            guarderBirthday:item.guarderBirthday,
            guarderSex:item.guarderSex,
            guarderPhoneNo:item.guarderPhoneNo
          }
          _bool=!methodsInfoFun.checkInfoBB(_paraObj);
          return !_bool;
        })
        return _bool;
      },
      // 判断和校验被保险人信息填写
      checkInfoBB(_paraObj:any){
        let index=_paraObj.index,
        relationShip=_paraObj.relationShip,
        name=_paraObj.name,
        idType=_paraObj.idType,
        idNumber=_paraObj.idNumber,
        birthday=_paraObj.birthday,
        sex=_paraObj.sex,
        phoneNo=_paraObj.phoneNo,
        guarderShow=_paraObj.guarderShow,
        isBuyer=_paraObj.isBuyer,
        guarderName=_paraObj.guarderName,
        guarderIdType=_paraObj.guarderIdType,
        guarderIdNumber=_paraObj.guarderIdNumber,
        guarderBirthday=_paraObj.guarderBirthday,
        guarderSex=_paraObj.guarderSex,
        guarderPhoneNo=_paraObj.guarderPhoneNo;
        relationShip=relationShip.replace(/[ ]/g, "");
        name=name.replace(/[ ]/g, "");
        idType=idType.replace(/[ ]/g, "");
        idNumber=idNumber.replace(/[ ]/g, "");
        birthday=birthday.replace(/[ ]/g, "");
        sex=sex.replace(/[ ]/g, "");
        phoneNo=phoneNo.replace(/[ ]/g, "");
        
        // guarderShow是否显示监护人
        // isBuyer监护人是否是本人
        guarderName=guarderName.replace(/[ ]/g, "");
        // guarderIdType 证件类型
        guarderIdNumber=guarderIdNumber.replace(/[ ]/g, "");
        // guarderBirthday
        // guarderSex
        guarderPhoneNo=guarderPhoneNo.replace(/[ ]/g, "");

        if(!relationShip){
          Toast("请选择被保险人" + (index + 1) + "与投保人的关系");
          return true;
        }
        if(relationShip=="00"){//本人不需要填写被保险人信息
          return false;
        }
        if(!name){
          Toast("请填写被保险人" + (index + 1) + "的姓名");
          return true;
        }else if(!checkInfoName(name)){
          Toast("请正确填写被保险人" + (index + 1) + "的姓名");
          return true;
        }

        if(!idNumber){
          Toast("请填写被保险人" + (index + 1) + "的证件号");
          return true;
        }else if(idType=="1" && !verIdCard(idNumber)){
          Toast("请正确填写被保险人" + (index + 1) + "的证件号");
          return true;
        }else if(idType!="1" && !checkInfoCard(idType,idNumber)){
          Toast("请正确填写被保险人" + (index + 1) + "的证件号");
          return true;
        }

        if(idType!="1" && !birthday){
          Toast("请选择被保险人" + (index + 1) + "的出生日期");
          return true;
        }
        if(idType!="1" && !sex){
          Toast("请选择被保险人" + (index + 1) + "的性别");
          return true;
        }
        if(!phoneNo){
          Toast("请输入被保险人" + (index + 1) + "的手机号");
          return true;
        }else if(!checkInfoTel(phoneNo)){
          Toast("请正确填写被保险人" + (index + 1) + "的手机号");
          return true;
        }
          // 监护人信息校验
        if(guarderShow && isBuyer!="Y"){
          if(!guarderIdNumber){
            Toast("请填写被保险人" + (index + 1) + "的监护人证件号");
            return true;
          }else if(guarderIdType=="1" && !verIdCard(guarderIdNumber)){
            Toast("请正确填写被保险人" + (index + 1) + "的证件号");
            return true;
          }else if(guarderIdType!="1" && !checkInfoCard(guarderIdType,guarderIdNumber)){
            Toast("请正确填写被保险人" + (index + 1) + "的证件号");
            return true;
          }

          if(guarderIdType!="1" && !guarderBirthday){
            Toast("请选择被保险人" + (index + 1) + "的出生日期");
            return true;
          }
          if(guarderIdType!="1" && !guarderSex){
            Toast("请选择被保险人" + (index + 1) + "的性别");
            return true;
          }
          if(!guarderPhoneNo){
            Toast("请输入被保险人" + (index + 1) + "的手机号");
            return true;
          }else if(!checkInfoTel(guarderPhoneNo)){
            Toast("请正确填写被保险人" + (index + 1) + "的手机号");
            return true;
          }


        }


        return false;
      },
      // 判断填写的证件号是否有重复
      isSameCardId(){
        const _cardId1=props.policyholder.idNumber;
        const _cardIds=state.insuredInfoList;
        let arr=new Array();
        for(let i in _cardIds){
          if(arr.indexOf(_cardIds[i].idNumber)>-1){
            Toast("被保人证件号有重复");
            return true;
          }
          arr.push(_cardIds[i].idNumber);
        }
        if(arr.indexOf(_cardId1)>-1){
          Toast("被保人与投保人证件号重复");
            return true;
        }
        return false;
      },
      // 添加被保险人
      addInsured:()=>{
        let _bool=true;
        _bool=methodsInfoFun.checkAllInfoBB();// 校验被保险人信息填写是否完整/正确
        _bool=_bool?!methodsInfoFun.isSameCardId():false;// 判断填写的证件号是否有重复
        if(_bool){
          const obj = {
              // 关系0本人 1配偶 2父母  3子女
            // 接口传入数据 00本人 01配偶  02 父母 03 子女
            relationShip: "",
            relationShipTab:0,
            // 参保人姓名
            name: "",
            // 参保人证件类型1身份证 2护照 6港澳台回乡证
            idType: "1",
            // 参保人证件号
            idNumber: "",
            // 参保人生日
            birthday: "",
            // 参保人性别
            sex: "",
            // 参保人手机号
            phoneNo: "",
            // 参保人确认按钮
            confirmBtnShow: false,
            // 参保人确认弹窗
            confirmDialogShow: false,
            // 监护人是否显示
            guarderShow: false,
            // 监护人是否本人Y、true本人  N、false非本人
            isBuyer: "Y",
            isBuyerBool: true,
            // 监护人姓名
            guarderName: "",
            // 监护人证件类型
            guarderIdType: "1",
            guarderIdTypeName:"身份证",
            // 监护人证件号
            guarderIdNumber: "",
            // 监护人生日
            guarderBirthday: "",
            // 监护人性别
            guarderSex: "",
            // 监护人手机号
            guarderPhoneNo: "",
          };
          state.insuredInfoList.push(obj);
        }
      },
    })
    // vant 组件选择器展示和赋值事件
    const methodsVantFun=reactive({
      // 删除被保险人
      insuredDel:(index:number)=>{
        if (state.insuredInfoList.length == 1) {
          Toast("至少有一个被保险人");
        } else{
          Dialog.confirm({
            title: "",
            message: '确认删除被保险人' + String(index + 1) + '吗',
          })
            .then(() => {
              state.insuredInfoList.splice(index, 1);
              // on confirm
            })
            .catch(() => {
              // on cancel
            });
        }
      },
      
      vanTabs:(index:number)=>{
        let inde=state.currentInsuredIndex;
        // 本人00 配偶01 父母02  子女03 其他04
        let _indetab=inde<10?"0"+String(inde):String(inde);

        state.insuredInfoList[index].relationShip=_indetab;
        state.insuredInfoList[index].relationShipTab=inde;
      },
      // 被保人出生日期确认
      confirmTimeBB(val:string,index:number){
        state.insuredInfoList[index].birthday=val;
        state.insuredInfoList[index].guarderShow=userAge(val)<18?true:false;
      },
      // 监护人出生时间确认
      confirmTimeBBJH(val:string,index:number){
        if(userAge(val)<18){
          Toast("监护人须为满18周岁的成年人");
        }else{
          state.insuredInfoList[index].guarderBirthday=val;
        }
        
      },
      
      beforeChange:(index:number)=>{
        state.currentInsuredIndex=index;

        return true;
      },
      switchChange:(bool:boolean)=>{
        state.insuredInfoList[state.currentInsuredIndex].isBuyer=bool?"Y":"N"
      },
      switchClick(index:number){
        state.currentInsuredIndex=index
      }
    })
    

    return {
      ...toRefs(state),

      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),

      ...toRefs(methodsVantFun),
      ...toRefs(methodsInfoFun),
    }
  }
})
</script>
<style lang="less" scoped>
@import url("./style.less");
</style>